<template>
  <a-drawer
    :width="800"
    :visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title> 储存位置 </template>
    <div>
      <tableTurn
        style="margin-top: 10px"
        :table-data="getData"
        ref="tableRef"
        :args="args"
      >
        <a-table-column :width="80" align="center">
          <template #title> 序号 </template>
          <template #cell="{ rowIndex }">
            <div style="position: relative">
              <div>{{ rowIndex + 1 }}</div>
            </div>
          </template>
        </a-table-column>
        <a-table-column
          align="center"
          :width="80"
          title="储存位置"
          data-index="name"
        >
        </a-table-column>

        <a-table-column
          align="center"
          :width="80"
          title="当前储存数量"
          data-index="wide"
        >
        </a-table-column>
      </tableTurn>
    </div>
  </a-drawer>
</template>

<script lang="ts" setup>
  import { reactive, computed, ref, watchEffect, nextTick } from 'vue';
  import { GetLocationData } from '@/api/inventory-management/warehouse-management/location-list/index';
  import { cloneDeep } from 'lodash';
  // import { cloneDeep } f rom 'lodash';

  // 表格配置
  const args = reactive({
    stripe: false,
    rowSelection: {
      type: 'radio',
      showCheckedAll: true,
      onlyCurrent: false,
    },
    bordered: {
      headerCell: true,
    },
    rowKey: 'id', // 批量选择按钮 以合同名称来作为key
  });

  const tableRef = ref();
  const props = withDefaults(
    defineProps<{
      visible: boolean;
    }>(),
    {
      visible: false,
    }
  );
  const rowSelection: any = {
    type: 'radio',
  };
  const fieldNames = { value: 'id', label: 'name' };
  const emit = defineEmits(['update:visible', 'selectLocationEdit']);
  const checkedKeys = ref([]);
  const checkStrictly = ref(false);

  const getData = async (page?: any) => {
    try {
      const res = await GetLocationData({ ...page });
      return Promise.resolve(res);
    } catch (err: unknown) {
      console.log(err);
    }
  };

  const checkTree = () => {};

  // 判断用户是否显示弹出框
  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    },
  });

  // 取消
  const handleCancel = () => {
    modalVisible.value = false;
  };

  const flatTreeData = (list: any) => {
    const res: any = [];
    function getData(list: any) {
      list.forEach((item: any) => {
        res.push(item);
        if (item.children) {
          getData(item.children);
        }
      });
    }
    getData(list);
    return res;
  };

  const selecteData = ref({ locationId: undefined, locationName: '' });
  const handleOk = () => {
    modalVisible.value = false;
    selecteData.value.locationId = tableRef.value.selectedList[0].id;
    selecteData.value.locationName = tableRef.value.selectedList[0].name;
    emit('selectLocationEdit', selecteData.value);
  };

  // watchEffect(() => {
  //   if (modalVisible.value) {
  //     tableRef.value.loadData();
  //   }
  // });
</script>

<style scoped lang="less">
  .demo-basic {
    margin-top: 5px;
    width: 500px;
    // margin: auto;
    background-color: aliceblue;
  }
</style>
